import React, { Component } from 'react'
import { View, Text, ImageBackground } from 'react-native'
import ViewShot from 'react-native-view-shot'
import Dialog, {
	DialogContent,
	SlideAnimation
} from 'react-native-popup-dialog'
import QRCode from 'react-native-qrcode-svg'

import commonStyle from '../../../libs/commonStyle'
import pxToDp from '../../../libs/pxToDp'
const imageW = pxToDp(600)
const imageH = pxToDp(865)

export default class ShareIncome extends Component {
	async saveImage() {
		let uri = await this.refs.shareImage.capture()
		return uri
	}
	render() {
		let { userId, totalIncome } = this.props
		return (
			<ViewShot
				ref="shareImage" 
				options={{ format: 'png', quality: 1, width: 600 }}
				style={[{ width: imageW, height: imageH, backgroundColor: '#fff' }]}
			>
				<ImageBackground
					resizeMode="stretch"
// 					source={{
// 						uri:
// 							'https://ojlty2hua.qnssl.com/image-1552697746646-5pmS6L6T5YWl5pS25b6S5rW35oqlLmpwZw==.jpg'
// 					}}
					source={require('../../../../assets/imgs/share-income-min.jpeg')}
					style={[commonStyle.wp100, commonStyle.hp100]}
				>
					<Text
						style={[
							commonStyle.f50,
							commonStyle.fontBold,
							{
								position: 'absolute',
								width: '100%',
								textAlign: 'center',
								top: imageH / 2.8,
								color: '#FE0000'
							}
						]}
					>
						{totalIncome || '0.00'}元
					</Text>
					<Text
						style={[
							commonStyle.f38,
							commonStyle.fontBold,
							commonStyle.pr10,
							{
								position: 'absolute',
								bottom: imageH * 0.152,
								left: imageW * 0.75,
								color: '#FE0000'
							}
						]}
					>
						{userId}
					</Text>

					{this.props.shareLink && (
						<View
							ref="qrcode"
							style={[
								{
									position: 'absolute',
									top: imageH * 0.74,
									left: imageW * 0.12
								}
							]}
						>
							<QRCode
								value={this.props.shareLink}
								size={imageW*0.33}
								color="#C30D23"
								backgroundColor="white"
							/>
						</View>
					)}
				</ImageBackground>
			</ViewShot>
		)
	}
}
